﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home mbzj.net</title>
    <link rel="stylesheet" href="/static/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/assets/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,800,700,300' rel='stylesheet'
          type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=BenchNine:300,400,700' rel='stylesheet' type='text/css'>
    <script src="/static/assets/js/modernizr.js"></script>

    <script src="/static/assets/js/echarts.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/assets/js/html5shiv.js"></script>
    <script src="/static/assets/js/respond.min.js"></script>
    <![endif]-->

</head>
<body>


<header>
    <div class="container">
        <div class="row">
            <div class="col-xs-5 header-logo">
                <br>
                <a href="index.html"><img src="/static/assets/img/logo.png" alt="" class="img-responsive logo"></a>
            </div>
            <div class="col-md-7">
                <nav class="navbar navbar-default">
                    <div class="container-fluid nav-bar">
                        <!-- Brand and toggle get grouped for better mobile display -->


                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                            <ul class="nav navbar-nav navbar-right">

                                <li><a class="menu" href="#about">about us</a></li>
                                <li><a class="menu" href="#service">our services </a></li>
                                <li><a class="menu" href="#team">our team</a></li>

                            </ul>
                        </div><!-- /navbar-collapse -->
                    </div><!-- / .container-fluid -->
                </nav>
            </div>
        </div>
    </div>
</header> <!-- end of header area -->


<!-- about section -->
<section class="about text-center" id="about">
    <div class="container">
        <div class="row">

            <section id="team" class="team">
                <div class="container">

                    <div class="section-title">
                        <h2>豆瓣Top250评分分布图</h2>
                    </div>

                    <!-- ======= Counts Section ======= -->
                    <section class="counts section-bg">
                        <div class="container">

                            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                            <div id="main" style="width: 100%;height:400px;"></div>

                        </div>
                    </section><!-- End Counts Section -->

                </div>
            </section>

        </div>
    </div>
</section><!-- end of about section -->


<!-- script tags
============================================================= -->
<script src="/static/assets/js/jquery-2.1.1.js"></script>

<script src="/static/assets/js/gmaps.js"></script>
<script src="/static/assets/js/smoothscroll.js"></script>
<script src="/static/assets/js/bootstrap.min.js"></script>
<script src="/static/assets/js/custom.js"></script>


<script type="text/javascript">
    var dom = document.getElementById("main");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    var datascore = [];
    datascore = {{ score }};
    var datanum = [];
    datanum = {{ num }};

    option = {
        title: {
            text: '电影评分表',
            subtext: 'Film rating sheet'
        },
        color: ['#3398DB'],

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },

        xAxis: {
            type: 'category',
            data: datascore
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: datanum,
                type: 'bar',
                barWidth: '60%',
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>

</body>
</html>